<template>
  <div class="timer">
    <label>{{ title }}：</label>
    <div style="text-align: left" class="w100">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        :disabled="disabled"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <div class="customize" :class="{ isDisable: disabled }">
        <div
          class="item"
          v-for="(item, i) in timeList"
          :key="i"
          @click="selected(item)"
          :class="{ isChecked: item.checked }"
        >
          <span
            v-show="item.checked"
            class="selectedIcon el-icon-circle-check"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    title: {
      type: String,
      default: "",
    },
    chosedData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      timeList: [],
      checkedData: [],
    };
  },
  watch: {
    chosedData: {
      handler(val) {
        //this.checkedData = this.chosedData;
        this.checkedData = this.chosedData.map((item) => {
          return parseInt(item);
        });
        this.checkedTime(this.checkedData);
      },
    },
  },
  created() {
    this.init();
  },
  methods: {
    //初始化时间
    init() {
      this.timeList = this.list.map((item) => {
        const obj = {
          name: item,
          checked: false,
        };
        if (this.title != "周") {
          obj.value = item;
        } else {
          obj.value = item == 7 ? 1 : item + 1;
        }
        return obj;
      });
      this.checkedData = this.chosedData.map((item) => {
        return parseInt(item);
      });
      this.checkedTime(this.checkedData);
    },
    //勾选选中数据
    checkedTime(data) {
      this.timeList.forEach((i) => {
        i.checked = false;
      });
      if (data.length != 0) {
        this.isIndeterminate = true;
      }
      data.forEach((item) => {
        this.timeList.forEach((i) => {
          if (i.value == item) {
            i.checked = true;
          }
        });
      });
    },
    //点击全选
    handleCheckAllChange(val) {
      if (val) {
        this.timeList.forEach((item) => {
          item.checked = true;
          this.checkedData.push(item.value);
        });
      } else {
        this.timeList.forEach((item) => {
          item.checked = false;
        });
        this.checkedData.length = 0;
      }
      this.isIndeterminate = false;
      if (this.title == "日") {
        this.$emit("selectDay");
      }
      if (this.title == "周") {
        this.$emit("selectWeek");
      }
      this.$emit("changeTime");
    },
    //点击时间
    selected(item) {
      if (!this.disabled) {
        item.checked = !item.checked;
        if (item.checked) {
          this.checkedData.push(item.value);
        } else {
          this.checkedData.remove(item.value);
        }
        this.isIndeterminate =
          this.checkedData.length > 0 &&
          this.checkedData.length < this.list.length;
        if (this.title == "日") {
          this.$emit("selectDay");
        }
        if (this.title == "周") {
          this.$emit("selectWeek");
        }
        this.$emit("changeTime");
      }
    },
    //获取选中数据
    getCheckedData() {
      const compare = function (x, y) {
        //比较函数
        if (x < y) {
          return -1;
        } else if (x > y) {
          return 1;
        } else {
          return 0;
        }
      };
      return this.checkedData.sort(compare).join(",");
    },
    //清空选择
    clearCheck() {
      if (this.checkedData.length != 0) {
        this.checkedData.length = 0;
        this.checkAll = false;
        this.isIndeterminate = false;
        this.timeList.forEach((item) => {
          item.checked = false;
        });
        this.$message.warning("日和周只能同时设置一种");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.timer {
  display: flex;
  margin: 10px 0;
  width:100%;
  .customize {
    width: 80%;
    border-left: 1px solid #ebeef5;
    //border-top:1px solid #EBEEF5;
    display: flex;
    flex-wrap: wrap;
    .item {
      text-align: center;
      line-height: 50px;
      box-sizing: border-box;
      width: 60px;
      height: 50px;
      border-top: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      position: relative;
      cursor: pointer;
      .selectedIcon {
        width: 15px;
        height: 15px;
        color: #409eff;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    .isChecked {
      background-color: #f2f8fe;
    }
  }
}
.isDisable {
  background-color: #fafafa;
}
</style>